<template>
	<view style="position: relative;">
		<view class="navigation_bg">
			<view class="navigation">
				<view class="navigation_back" @tap="backref()">
					<uni-icons type="back" size="24" color="#fff"></uni-icons>
				</view>
				<view class="navigation_title">
					我的店铺
				</view>
			</view>
		</view>
		<view class="good_con" >
			<view class="good_tabs" style="margin-top: 20px;">
				<view class="good_tab" v-for="(item,index) in goodTab" :key="index"
					:class="goodType == item.type?'active':''" @tap="changeTab(item)">
					{{item.name}}
					<view class="good_tab_line">

					</view>
				</view>
			</view>

			<view class="good_con_detail">
				<view class="good_con_aside">
					<view class="good_aside_tab" v-for="(item,index) in typeList"
						:class="item.id == typeId?'active':''" @click="selectType(index)">
						{{item.name}}
						<!-- <view class="good_aside_tab_num" v-if="item.num != 0">
							{{item.num}}
						</view> -->
					</view>
				</view>
				<view class="good_con_list">
					<!-- <view class="good_con_list_title">
						{{typeName}}
					</view> -->
					<view class="good_con_item" style="border: 1px solid #f3f3f3;padding: 4px;" v-for="(item,index) in goodsList">
						<view class="good_con_item_img">
							<image v-if="item.goodsImg" :src="domain + item.goodsImg" mode=""></image>
						</view>
						<view class="good_con_item_info">
							<view class="good_con_item_title">
								{{item.name}}
							</view>
							<view class="good_con_item_price">
								¥{{item.price}}
							</view>
							<view class="good_con_item_nums">
								<button type="default" @click="toDetail(item)">编辑</button>
							</view>
						</view>
					</view>
				</view>

				<view class="good_con_merchant"style="display: flex;justify-content: space-around;">
					<view class="" @tap="toDetail()">
						<button type="primary">新增产品</button>
					</view>
					<view class="" @tap="toTypeDetail()">
						<button type="primary">编辑分类</button>
					</view>
				</view>
			</view>
		 </view>
		 <tabBar current="2"></tabBar>
	</view>
</template>

<script>
	import { getStoreType, getStoreTypePro } from '../../api/api.js'
	import server_url from '../../api/config.js'
	export default {
		data() {
			return {
				domain: server_url,
				storeId: "",
				goodType: 1,
				// goodTab: [
				// 	{
				// 		name: '点餐',
				// 		type: 1
				// 	}
				// 	// {
				// 	// 	name: '评价',
				// 	// 	type: 2
				// 	// },
				// 	// {
				// 	// 	name: '商家',
				// 	// 	type: 3
				// 	// }
				// ],

				star: 5,

				typeId: 1,
				typeName: '',
				typeList: [],
				goodsList: [],

				evaluateType: '',
				evaluateTypes: [{
						name: '全部',
						active: true,
						type: '',
						number: null
					},
					{
						name: '好评',
						active: false,
						type: 1,
						number: 23
					},
					{
						name: '中评',
						active: false,
						type: 2,
						number: 0
					},
					{
						name: '差评',
						active: false,
						type: 3,
						number: 1
					},
				],

				commentList: [
				],
			};
		},
		methods: {
			backref() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeTab(item) {
				this.goodType = item.type;
			},
			
			toDetail(data){
				let id = ''
				if (data) {
					id = data.id
				}
				uni.navigateTo({
					url:'/pages/shop/checkout?id=' + id
				})
			},
			toTypeDetail(){
				uni.navigateTo({
					url:'/pages/shop/type'
				})
			},
			getType() {
				getStoreType().then(res => {
					this.typeList = res.data
					if (this.typeList && this.typeList.length) {
						this.getGoods(this.typeList[0])
					}
				})
			},
			selectType (index) {
				this.getGoods(this.typeList[index])
			},
			getGoods(item) {
				this.typeId = item.id
				getStoreTypePro({
					// businessId: this.storeId,
					categotyId: item.id
				}).then(res => {
					this.goodsList = res.data
				})
			}
		},
		onShow() {
			this.getType()
		}
	}
</script>

<style lang="scss">
	::v-deep uni-swiper .uni-swiper-dot {
		background-color: rgba(255, 255, 255, .5);
		width: 48rpx;
		height: 6rpx;
		border-radius: 0;
	}

	::v-deep uni-swiper .uni-swiper-dot-active {
		background-color: #2588FF;
	}

	.type-enter-active {
		animation: inventory .2s linear;
	}

	.type-leave-active {
		animation: inventory .2s linear reverse;
	}

	@keyframes inventory {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.navigation_bg {
		height: 360rpx;
		width: 100%;
		background: url('../../static/image/shop/detailBg.png') no-repeat;
		background-size: cover;
	}

	.navigation {
		width: 100%;
		height: 160rpx;
		padding: 60rpx 24rpx 0;
		text-align: center;
		position: absolute;
		z-index: 2;

		.navigation_back {
			position: absolute;
			top: 60rpx;
		}

		.navigation_title {
			color: #fff;
			font-size: 36rpx;
		}
	}

	.good_con {
		padding: 0 24rpx;
		padding-bottom: 180rpx;

		.good_info {
			padding: 26rpx 28rpx;
			border-radius: 12rpx;
			// background-color: #fff;
			margin-top: -140rpx;
			box-shadow: 0px 4px 8px rgba(37, 136, 255, 0.06);

			.good_info_hd {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.good_info_msg {
					width: 75%;

					.good_info_title {
						font-size: 36rpx;
						font-weight: 700;
						color: #2E343A;
					}

					.good_info_brief {
						color: #9098A0;
						font-size: 24rpx;
					}
				}

				.good_info_img {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 12rpx;
					}
				}
			}

			.good_info_notice {
				image {
					width: 28rpx;
					height: 26rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #9098A0;
				}
			}
		}

		.good_tabs {
			display: flex;
			margin-top: 56rpx;

			.good_tab {
				margin-right: 80rpx;
				position: relative;
				font-size: 32rpx;
				color: #2E343A;
				font-weight: 500;

				&.active {
					.good_tab_line {
						display: block;
					}
				}

				.good_tab_line {
					display: none;
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 6rpx;
					background-color: #2588FF;
				}
			}
		}

		.good_con_detail {
			margin-top: 20rpx;
			padding-bottom: 200rpx;
			display: flex;

			.good_con_aside {
				width: 20%;

				.good_aside_tab {
					color: #9098A0;
					font-size: 28rpx;
					padding: 20rpx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					&.active {
						color: #333;
						font-weight: 700;
					}

					.good_aside_tab_num {
						position: absolute;
						top: -15rpx;
						right: 8rpx;
						border: 2rpx solid #fff;
						background-color: #FFB226;
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
					}
				}
			}

			.good_con_list {
				width: 80%;
				padding-top: 20rpx;
				padding-left: 20rpx;

				.good_con_list_title {
					color: #969696;
					font-weight: bolder;
				}

				.good_con_item {
					position: relative;
					display: flex;
					margin-top: 20rpx;

					.good_con_item_img {
						flex-shrink: 0;

						image {
							width: 162rpx;
							height: 162rpx;
							border-radius: 12rpx;
						}
					}

					.good_con_item_info {
						margin-left: 32rpx;

						.good_con_item_title {
							color: #2E343A;
							font-size: 28rpx;
							font-weight: 700;
						}

						.good_con_item_price {
							color: #FF2626;
							font-size: 32rpx;
							margin-top: 60rpx;
						}
					}

					.good_con_item_type {
						position: absolute;
						bottom: 10rpx;
						right: 0;
						width: 86rpx;
						height: 40rpx;
						background-color: #2588FF;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						color: #FFFFFF;
						border-radius: 40rpx;

						.good_con_item_type_num {
							position: absolute;
							top: -35rpx;
							right: 8rpx;
							border: 2rpx solid #fff;
							background-color: #FFB226;
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.good_con_item_nums {
						position: absolute;
						bottom: 0;
						right: 0;
						display: flex;
						align-items: center;

						.good_con_item_dec {
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}

						.good_con_item_num {
							margin: 0 16rpx;
							font-size: 28rpx;
							color: #2E343A;
							margin-top: -10rpx;
						}

						.good_con_item_add {
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}

			.good_con_merchant {
				position: fixed;
				bottom: 70px;
				left: 0;
				z-index: 5;
				width: 100%;
				height: 200rpx;
				background-color: #fff;
				// padding: 0 24rpx;
				display: flex;
				align-items: center;

				.good_con_mer_checkout {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 100rpx;
					border-radius: 100rpx;
					background-color: #3A3635;
					padding-left: 140rpx;
					padding-right: 60rpx;

					.good_merchant_distribute {
						font-size: 28rpx;

						.merchant_price {
							color: #fff;
						}

						text {
							color: #999999;
						}
					}

					.good_merchant_min {
						color: #999999;
						font-size: 28rpx;
					}

					.good_con_shop_car {
						position: absolute;
						left: 0;
						top: -18rpx;

						image {
							width: 90rpx;
							height: 120rpx;
						}

						.good_con_shopcar_num {
							position: absolute;
							top: 0;
							right: -18rpx;
							border: 2rpx solid #fff;
							background-color: #2288FF;
							color: #fff;
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							display: flex;
							justify-content: center;
							align-items: center;
						}

					}
				}

				.good_merchant_checkout {
					position: absolute;
					right: 0;
					width: 192rpx;
					height: 100rpx;
					background-color: #2588FF;
					border-top-right-radius: 200rpx;
					border-bottom-right-radius: 200rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.good_con_evaluate {
			margin-top: 20rpx;
			padding-bottom: 200rpx;

			.good_con_score {
				display: flex;
				align-items: center;

				.score_num {
					font-size: 80rpx;
					color: #2588FF;
					font-weight: bolder;
				}

				.score_right {
					margin-left: 20rpx;

					.score_stars {
						display: flex;

						image {
							width: 16rpx;
							height: 16rpx;
							margin-right: 8rpx;
						}
					}

					.score_type_num {
						color: #9098A0;
						font-size: 24rpx;
					}
				}
			}

			.evaluate_types {
				display: flex;
				align-items: center;
				margin-top: 15rpx;

				.evaluate_type {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: #2E343A;
					font-weight: 500;
					margin-right: 30rpx;
					width: 130rpx;
					height: 56rpx;
					border-radius: 56rpx;

					&.active {
						background-color: #2588FF;
						color: #fff;
					}
				}
			}

			.evaluate_comments {
				margin-top: 30rpx;

				.evaluate_comment {
					margin-bottom: 20rpx;

					.comment_hd {
						position: relative;
						display: flex;
						align-items: center;

						.comment_attr {
							image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}
						}

						.comment_info {
							margin-left: 16rpx;

							.comment_name {
								font-size: 28rpx;
								color: #2E343A;
								font-weight: 500;
							}

							.comment_stars {
								display: flex;
								margin-top: 10rpx;

								image {
									width: 16rpx;
									height: 16rpx;
									margin-right: 8rpx;
								}
							}
						}

						.comment_time {
							position: absolute;
							right: 0;
							font-size: 24rpx;
							color: #9098A0;
						}
					}

					.comment_bd {
						.comment_content {
							font-size: 30rpx;
							color: #2E343A;
							text-align: justify;
						}

						.comment_imgs {
							display: flex;
							margin-top: 24rpx;

							image {
								width: 200rpx;
								height: 200rpx;
								border-radius: 12rpx;
								margin-right: 16rpx;
							}
						}
					}

					.comment_bt {
						margin-top: 24rpx;
						padding: 16rpx;
						font-size: 26rpx;
						color: #2E343A;
						background-color: #F9FBFC;
					}
				}
			}
		}

		.good_shop_info {
			margin-top: 20rpx;

			.good_shop_info_title {
				font-size: 32rpx;
				color: #333333;
				font-weight: 700;
			}

			.good_shop_swiper {
				margin-top: 24rpx;
				width: 100%;
				height: 260rpx;

				.swiper {
					height: 260rpx;
				}

				.swiper-item {
					width: 100%;
					height: 260rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.good_shop_info_list {
				margin-top: 24rpx;
				background-color: #F9FBFC;
				padding: 24rpx;
				border-radius: 12rpx;

				.good_shop_info_item {
					position: relative;
					display: flex;
					margin-bottom: 24rpx;

					.good_shop_info_icon {
						margin-right: 18rpx;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					text {
						font-size: 28rpx;
						color: #2E343A;
					}

					.call_phone {
						position: absolute;
						right: 24rpx;
						font-size: 24rpx;
						color: #2288FF;
						font-weight: 500;
					}
				}
			}
		}
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.good_type {
		position: fixed;
		bottom: 200rpx;
		left: 0;
		width: 100%;
		z-index: 5;
		background-color: #fff;
		padding: 28rpx 24rpx;
		border-radius: 16rpx 16rpx 0 0;

		.good_type_close {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
		}

		.good_type_select {
			font-size: 24rpx;
			color: #2E343A;
		}

		.good_type_info {
			display: flex;
			margin-top: 30rpx;

			.good_type_info_img {
				image {
					width: 162rpx;
					height: 162rpx;
					border-radius: 12rpx;
				}
			}

			.good_type_info_msg {
				margin-left: 32rpx;

				.good_type_info_name {
					color: #2E343A;
					font-size: 32rpx;
					font-weight: 700;
				}

				.good_type_info_price {
					font-size: 32rpx;
					color: #FF2626;
					font-weight: 700;
					margin-top: 60rpx;
				}
			}
		}

		.good_type_num_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.good_type_label {
				font-size: 24rpx;
				color: #2E343A;
			}

			.good_types_nums {
				display: flex;
				align-items: center;

				.good_con_item_dec {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.good_con_item_num {
					margin: 0 16rpx;
					font-size: 28rpx;
					color: #2E343A;
					margin-top: -10rpx;
				}

				.good_con_item_add {
					image {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

		.good_type_item {
			margin-top: 20rpx;

			.good_type_label {
				font-size: 28rpx;
				color: #2E343A;
			}

			.good_type_list {
				margin-top: 12rpx;
				display: flex;
				flex-wrap: wrap;

				.good_type_item {
					margin-right: 16rpx;
					width: 152rpx;
					height: 56rpx;
					border-radius: 56rpx;
					background-color: #F9FBFD;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: #2E343A;

					&.active {
						background-color: #2588FF;
						color: #fff;
					}
				}
			}
		}
	}

	.good_cartList {
		position: fixed;
		bottom: 200rpx;
		left: 0;
		width: 100%;
		z-index: 5;
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;

		.cartList_hd {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cartList_hd_title {
				font-size: 24rpx;
				color: #2E343A;
			}

			.cartList_clear {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #2E343A;

				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 4rpx;
				}
			}

		}

		.carList_bd {
			.cartList_item {
				position: relative;
				margin-top: 20rpx;
				display: flex;

				.cartList_item_img {
					image {
						width: 162rpx;
						height: 162rpx;
						border-radius: 12rpx;
					}
				}

				.cartList_item_info {
					margin-left: 24rpx;

					.cartList_item_title {
						font-size: 28rpx;
						color: #2E343A;
						font-weight: 700;
					}

					.cartList_item_tags {
						font-size: 24rpx;
						color: #9098A0;
						margin-top: 10rpx;
					}

					.carList_item_price {
						font-size: 32rpx;
						color: #FF2626;
						margin-top: 30rpx;
					}
				}

				.good_types_nums {
					position: absolute;
					bottom: 0;
					right: 0;
					display: flex;
					align-items: center;

					.good_con_item_dec {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.good_con_item_num {
						margin: 0 16rpx;
						font-size: 28rpx;
						color: #2E343A;
						margin-top: -10rpx;
					}

					.good_con_item_add {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
		}
	}
</style>